<template>
  <el-card
    shadow="always"
    class="box-card"
  >
    <el-row>
      <el-button size="small" type="primary" style="margin-bottom: 20px;" @click="addFn">添加角色</el-button>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        label="角色名称"
        width="500"
      />
      <el-table-column
        prop="description"
        label="角色描述"
      />
      <el-table-column
        prop="handle"
        label="操作"
        width="500"
      >
        <template v-slot="{row}">
          <el-button size="small" type="success" @click="premFn(row.id)">分配权限</el-button>
          <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗组件 -->
    <AddRole ref="roleData" :show-dialog.sync="showDialog" @updateList="updateList" />
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page="page"
        @current-change="changePage"
      />
    </el-row>
    <!-- 分配权限弹窗组件 -->
    <el-dialog title="分配权限" :visible="viibleDialog" @close="closePerm">
      <el-tree ref="tree" :data="treeData" node-key="id" :props="{label:'title'}" show-checkbox :check-strictly="true" />
      <span slot="footer">
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="okBtn">确定</el-button>
          <el-button size="small" @click="closePerm">取消</el-button>
        </el-row>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { getRoleList, delRole, getRoleDetail, getRoleCount, editRole } from '@/api/roles'
import AddRole from './component/add-role.vue'
import { listToTree } from '@/utils/index'
import { getPermissiosnList } from '@/api/roles'
export default {
  components: { AddRole },
  data() {
    return {
      // 分配权限弹窗显示
      viibleDialog: false,
      // 控制弹窗显示
      showDialog: false,
      // 渲染页面的数据
      tableData: [],
      total: 100,
      size: 2,
      page: 1,
      // 渲染树形结构
      treeData: [],
      // 拿到权限点集合
      roleDetail: {},
      roleId: {}
    }
  },
  async created() {
    // 渲染角色列表
    await this.getRoleList()
    // 角色数量
    await this.getRoleCount()
    // 获取权限列表
    const res = await getPermissiosnList()
    console.log(31, res)
    this.treeData = await listToTree(res.data, '0')
    // console.log(92, this.treeData)
  },
  methods: {
    // 分配权限弹窗
    async premFn(id) {
      // 保存角色id
      this.roleId = id
      this.viibleDialog = true
      // 获取角色详情 id 拿到当前角色权限点
      this.roleDetail = await getRoleDetail(id)
      // console.log(99, this.roleDetail)
      // 回显权限点
      const res = this.roleDetail.data.permissions.map(item => item.id)
      // console.log(105, res)
      this.$refs.tree.setCheckedKeys(res)
    },
    // 权限弹窗 确定 事件
    async okBtn() {
      const perms = this.$refs.tree.getCheckedKeys()
      // console.log(107, perms)
      // 调用接口
      await editRole({
        id: this.roleId,
        permissions: perms
      })
      this.$message.success('分配权限成功')
      // 关闭弹窗
      this.closePerm()
    },
    // 权限弹窗 取消 事件
    closePerm() {
      this.viibleDialog = false
    },
    // 触发分页事件
    changePage(page) {
      this.page = page
      this.getRoleList()
    },
    // 获取角色数量
    async getRoleCount() {
      const count = await getRoleCount()
      // console.log(76, count)
      this.total = count.data
    },
    // 编辑角色
    async editFn(id) {
      this.showDialog = true
      const res = await getRoleDetail(id)
      // console.log(61, res.data)
      // 调用子组件的变量
      this.$refs.roleData.formData = res.data
    },
    // 删除角色
    delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delRole(id)
        if (this.tableData.length === 1 && this.page !== 1) {
          this.page--
          await this.getRoleCount()
        }
        this.getRoleList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 子传父刷新页面
    async updateList() {
      await this.getRoleList()
      await this.getRoleCount()
    },
    // 渲染列表角色
    async getRoleList() {
      const res = await getRoleList({
        _limit: this.size,
        _start: (this.page - 1) * this.size
      })
      // console.log(67, res.data)
      this.tableData = res.data
    },
    // 新增角色
    addFn() {
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.box-card {
    margin: 10px;
  }
</style>
